<template>
    <el-row>
        <el-col>
            <el-button type="primary" @click="addPage()">新增</el-button>
        </el-col>
        <el-col :span="24" class="table-container">
            <el-table :data="tableData" stripe width="80%" header-cell-class-name="table-header-class">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="id" />
                <!-- <el-table-column prop="pwd" label="密码" width="180" /> -->
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="version" label="版本" />
                <el-table-column prop="diagramResourceName" label="diagramResourceName" />
                <el-table-column prop="deploymentTime" label="deploymentTime" />
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <el-button @click="detail(scope.row)" link type="primary" size="small">
                            查看
                        </el-button>
                        <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col>
            <el-pagination v-show="page.total > 0" :current-page="page.currentPage" :page-size="page.pageSize"
                :page-sizes="[10, 20, 30]" layout="prev, pager, next, jumper,sizes" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" background prev-text="上一页"
                next-text="下一页" class="pagination-container" />
        </el-col>
    </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { selectProcessDefineList } from '@/http/processDefine'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter() // 获取 router 实例
const route = useRoute()   // 获取当前路由对象（响应式）

const page = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
})

const tableData = ref([])

const addPage = () => {
    router.push("/bpmn/processDefineAdd")
}
const detail = (row) => {
    console.log(row)
    console.log(row.id)
    router.push({
        path: "/bpmn/processDefineInfo", // 路由名称
        query: {
            id: row.id
        }
    })
}
const del = (row) => {

}

const handleCurrentChange = (val) => {
    page.value.currentPage = val
    selectPage()
}

const handleSizeChange = (val) => {
    page.value.pageSize = val
    selectPage()
}

const selectPage = () => {
    selectProcessDefineList(page.value.currentPage, page.value.pageSize).then(res => {
        if (res.data) {
            tableData.value = res.data.records
            page.value.total = res.data.total
        }
    })
}

selectPage()

</script>

<style></style>